<template>
    <el-row>
        <el-col :span="24">
            <el-collapse :value="['2','3','4']">
                <el-collapse-item name="1">
                    <template slot="title">
                        <view style="width: 100%;text-align: center">
                            布局组件
                        </view>
                    </template>
                    <left-compoents-by-layouts :layout="layout" :clone="cloneLayout" :choose="choosLayouts"></left-compoents-by-layouts>
                </el-collapse-item>
                <el-collapse-item name="2" disabled>
                    <template slot="title">
                        <view style="width: 100%;text-align: center">
                            普通组件
                        </view>
                    </template>
                    <draggable :list="list"
                               :clone="cloneComponent"
                               :options="{
                            sort:false
                            }"
                               :group="{ name: 'components', pull: 'clone', put: false}"
                               @choose="choosComponents"
                               class="components-class"
                               style="position: relative;display: flex;justify-content: center;flex-wrap: wrap;">
                        <ComponentContainer v-for="item in list"
                                            :key="item.id"
                                            :name="item.name"
                                            :componentName="item.componentName">
                        </ComponentContainer>
                    </draggable>
                </el-collapse-item>
                <el-collapse-item name="4" disabled>
                    <template slot="title">
                        <view style="width: 100%;text-align: center">
                            ColorUI组件
                        </view>
                    </template>
                    <draggable :list="colorUiList"
                               :clone="cloneComponent"
                               :options="{
                            sort:false
                            }"
                               :group="{ name: 'components', pull: 'clone', put: false}"
                               @choose="choosComponents"
                               class="components-class"
                               style="position: relative;display: flex;justify-content: center;flex-wrap: wrap;">
                        <ComponentContainer v-for="item in colorUiList"
                                            :key="item.id"
                                            :name="item.name"
                                            :componentName="item.componentName">
                        </ComponentContainer>
                    </draggable>
                </el-collapse-item>
                <el-collapse-item name="4" disabled>
                    <template slot="title">
                        <view style="width: 100%;text-align: center">
                            表单组件
                        </view>
                    </template>
                    <draggable :list="formList"
                               :clone="cloneComponent"
                               :options="{
                            sort:false
                            }"
                               :group="{ name: 'components', pull: 'clone', put: false}"
                               @choose="choosComponents"
                               class="components-class"
                               style="position: relative;display: flex;justify-content: center;flex-wrap: wrap;">
                        <ComponentContainer v-for="item in formList"
                                            :key="item.id"
                                            :name="item.name"
                                            :componentName="item.componentName">
                        </ComponentContainer>
                    </draggable>
                </el-collapse-item>
                <el-collapse-item name="3" disabled>
                    <template slot="title">
                        <view style="width: 100%;text-align: center">
                            我的组件
                        </view>
                    </template>
                    <draggable :list="myComponentsList"
                               :clone="cloneMyComponent"
                               :options="{
                            sort:false
                            }"
                               :group="{ name: 'components', pull: 'clone', put: false}"
                               @choose="choosComponents"
                               class="components-class"
                               style="position: relative;display: flex;justify-content: center;flex-wrap: wrap;">
                        <my-components v-for="item in myComponentsList"
                                            :key="item.id"
                                            :name="item.name"
                                            :list="item.list"
                                            :componentName="item.componentName">
                        </my-components>
                        <my-components @addMyComponents="addMyComponents">
                        </my-components>
                    </draggable>
                </el-collapse-item>
            </el-collapse>

        </el-col>
    </el-row>
</template>

<script>
    import ComponentContainer from '@/components/LeftComponents/ComponentContainer/ComponentContainer'
    import draggable from '@/common/js/vuedraggable'
    import LeftCompoentsByLayouts from './LeftCompoentsByLayouts'
    import MyComponents from './ComponentContainer/MyComponents/MyComponents'

    let layoutGlobalId = 100;
    let compnentGlobalId = 100

    export default {
        name: 'LeftComponents',
        data(){
          return {
              dragging: false,
              layout: [
                  {name:'布局 1',id: 0, componentName: 'Iflex',
                      iStyle:{},
                      iClass: [],
                      num: [{
                          iStyle:{},
                          iClass: [],
                          itemList: [],
                          layoutClass:'flex-sub',
                      }]
                  },
                  {name:'布局 2:2',id: 1, componentName: 'Iflex',
                      iStyle:{},
                      iClass: [],
                      num: [{
                          iStyle:{},
                          iClass: [],
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iStyle:{},
                          iClass: [],
                          layoutClass:'flex-sub',
                          itemList: []
                      }]},
                  {name:'布局 3:3:3',id: 2, componentName: 'Iflex',
                      iStyle:{},
                      iClass: [],
                      num: [{
                          iClass: [],
                          iStyle:{},
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iClass: [],
                          iStyle:{},
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iStyle:{},
                          iClass: [],
                          layoutClass:'flex-sub',
                          itemList: []
                      }]},
                  {name:'布局 1:1:1:1',id: 3, componentName: 'Iflex',
                      iStyle:{},
                      iClass: [],
                      num: [{
                          iClass: [],
                          iStyle:{},
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iStyle:{},
                          iClass: [],
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iStyle:{},
                          iClass: [],
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iStyle:{},
                          iClass: [],
                          layoutClass:'flex-sub',
                          itemList: []
                      }]},
                  {name:'布局 1:1:1:1:1',id: 4, componentName: 'Iflex',
                      iStyle:{},
                      iClass: [],
                      num: [{
                          iClass: [],
                          iStyle:{},
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iClass: [],
                          iStyle:{},
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iStyle:{},
                          iClass: [],
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iClass: [],
                          iStyle:{},
                          layoutClass:'flex-sub',
                          itemList: []
                      },{
                          iStyle:{},
                          iClass: [],
                          layoutClass:'flex-sub',
                          itemList: []
                      }]},
              ],
          }
        },
        methods:{
            addMyComponents(){
                this.$store.commit('setPatternComponentslList',{list: []})
                this.$store.commit('setPattern',{pattern: 'component'})
            },
            changeInfo(evt){
                this.listNull = []
            },
            cloneLayout(cloneObj) {
                let newObj = {...cloneObj}
                layoutGlobalId++
                newObj.id = layoutGlobalId
                let nullNum = []
                for (let i = 0; i < newObj.num.length; i++) {
                    let {layoutClass,} = newObj.num[i]
                    nullNum.push({itemList:[],layoutClass,iStyle:{},iClass:[]})
                }
                newObj.iStyle = {}
                newObj.iClass = []
                newObj.num = nullNum
                return newObj
            },
            cloneComponent(cloneObj){
                let newObj = JSON.parse(JSON.stringify(cloneObj))
                compnentGlobalId++
                newObj.id = compnentGlobalId
                return newObj
            },
            cloneMyComponent(cloneObj){
                let newObj = {...cloneObj}
                compnentGlobalId++
                newObj.id = compnentGlobalId
                newObj.iStyle = {}
                newObj.iClass = []
                return newObj
            },
            choosComponents(){
                this.$store.commit('setIflexGroup',{iflexGroup:'components'})
            },
            choosLayouts(){
                this.$store.commit('setIflexGroup',{iflexGroup:'layouts'})
            },
            filterListFun(list){
                let filterListStr = JSON.stringify(list)
                filterListStr =filterListStr.replace(/"Iflex"/g,'"SimpleIflex"')
                return JSON.parse(filterListStr)
            },
        },
        computed:{
            list(){
                return this.$store.state.componentsInfo.list
            },
            colorUiList(){
                return this.$store.state.componentsInfo.colorUiList
            },
            formList(){
                return this.$store.state.componentsInfo.formList
            },
            myComponentsList(){
                let id = 777
                //  {name:'按钮',id: 0, componentName: 'Ibutton',iStyle:{},iClass: [],propsValue: []},
                let list = []
                let componentsList = this.$store.state.patternComponents.componentsList
                Object.keys(componentsList).map((key)=>{
                    let filterComponentsList = this.filterListFun(componentsList[key])
                    list.push({
                        name: key,
                        id: id++,
                        componentName: 'MyComponentsEntity',
                        iStyle: {},
                        iClass: {},
                        propsValue: [],
                        list: filterComponentsList
                    })
                })
                return list
            }
        },
        components:{
            ComponentContainer,
            draggable,
            LeftCompoentsByLayouts,
            MyComponents
        }
    }
</script>

<style>
</style>
